<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>RTSP</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="./js/jsmpg.js"></script>
  <style>
    .div-box {
      display: flex;
      flex-wrap: wrap;
    }

    .video {
      width: 300px;
      height: 200px
    }

    .close-socket {
      width: 100px;
      height: 100px;
      line-height: 100px;
      background: rebeccapurple;
    }
  </style>
</head>

<body>
  <div class="div-box">
    <canvas id="canvas0" class="video"></canvas>
    <canvas id="canvas1" class="video"></canvas>
    <canvas id="canvas2" class="video"></canvas>
    <canvas id="canvas3" class="video"></canvas>

    <canvas id="canvas4" class="video"></canvas>
    <canvas id="canvas5" class="video"></canvas>
    <!-- <canvas id="canvas6" class="video"></canvas>
    <canvas id="canvas7" class="video"></canvas>

    <canvas id="canvas8" class="video"></canvas>
    <canvas id="canvas9" class="video"></canvas>
    <canvas id="canvas10" class="video"></canvas>
    <canvas id="canvas11" class="video"></canvas>

    <canvas id="canvas12" class="video"></canvas>
    <canvas id="canvas13" class="video"></canvas>
    <canvas id="canvas14" class="video"></canvas>
    <canvas id="canvas15" class="video"></canvas> -->
  </div>

</body>

</html>
<script src="js/jquery-1.9.1.js"></script>
<script>
  $(function () {
    $.ajax({
      type: 'POST',
      url: 'http://192.168.1.22:8126/video',
      data: {
        video: [
          'rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov',
          'rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov',
          'rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov',
          'rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov',
        ]
      },
      success: function (data) {
        console.log('success', JSON.parse(data));
        let clientArr = [];
        for (let index = 0; index < 6; index++) {
          clientArr.push(null)
        }
        for (let index = 0; index < 6; index++) {
          // let portId = 9999+index;
          const canvas = document.getElementById('canvas' + index);
          const client = new WebSocket('ws://192.168.1.22:' + (28080 + index));
          const player = null;
          new jsmpeg(client, { canvas: canvas });
          // client.onmessage = (mes) => {
          //   if (!clientArr[index]) {
          //     console.log('收到服务的的数据了。。。', mes);
          //     clientArr[index] = new jsmpeg(client, { canvas: canvas });
          //     new jsmpeg(client, { canvas: canvas });
          //   }
          // }
        }
        // client.onopen = (mes) => {
        //   console.log('链接建立了。。。', mes);
        // }
        // client.onmessage = (mes) => {
        //   console.log('收到服务的的数据了。。。', mes);
        // }
        // client.onerror = (mes) => {
        //   console.log('链接错误了。。。', mes);
        // }
        // client.onclose = (mes) => {
        //   console.log('链接关闭了。。。', mes);
        // }
        // console.log(client);
       
        // }

        $('.close-socket').click(() => {
          console.log('关闭连接...');
          client.close();//关闭连接
        })

      },
      error: function (data) {
        console.log('error', data)
      },
    })


  })
</script>